<template>
  <div class="circle-chart-component-box">
    <template v-for="(item, index) in circleData" :key="index">
      <div
        class="pie-item"
        v-if="item"
        :style="{
          background: `conic-gradient(var(${conicGradient[index]}) 0%,transparent ${item}%)`,
          transform: index >= 1 ? `rotate(${(rotateData[index - 1] / 100) * 360}deg)` : 0,
        }"
      ></div>
    </template>
  </div>
</template>

<script>
export default {
  name: "circleChart",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      circleData: [0, 0, 0, 0.0],
      rotateData: [0, 0, 0, 0],
      conicGradient: [
        "--one-color",
        "--two-color",
        "--three-color",
        "--four-color",
        "--five-color",
      ],
    };
  },
  computed: {
    total() {
      return this.data?.reduce((prev = 0, curr) => prev + curr) || 0;
    },
  },

  watch: {
    data: {
      handler(newValue) {
        if (newValue.length > 0) {
          this.circleData = newValue.map(
            (item) => Math.ceil((item / this.total) * 100) || 0
          );
          const num1 = Math.ceil((newValue[0] / this.total) * 100) || 0;
          const num2 = num1 + (Math.ceil((newValue[1] / this.total) * 100) || 0);
          const num3 = num2 + (Math.ceil((newValue[2] / this.total) * 100) || 0);
          const num4 = num3 + (Math.ceil((newValue[3] / this.total) * 100) || 0);
          this.rotateData = [num1, num2, num3, num4];
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.circle-chart-component-box {
  position: relative;
  --one-color: #ff67a8;
  --two-color: #6eec9b;
  --three-color: #f97b7b;
  --four-color: #4ae4f0;
  --five-color: #f4aa6a;

  .pie-item {
    position: absolute;
    width: 144px;
    height: 144px;
    border-radius: 50%;
    mask: radial-gradient(transparent, transparent 47px, #000 48px, #000 48px, #000 100%);

    &:nth-child(1)::before {
      background: linear-gradient(
        90deg,
        var(--one-color) 50%,
        transparent 51%,
        transparent 100%
      );
    }
    &:nth-child(2)::before {
      background: linear-gradient(
        90deg,
        var(--two-color) 50%,
        transparent 51%,
        transparent 100%
      );
    }
    &:nth-child(3)::before {
      background: linear-gradient(
        90deg,
        var(--three-color) 50%,
        transparent 51%,
        transparent 100%
      );
    }
    &:nth-child(4)::before {
      background: linear-gradient(
        90deg,
        var(--four-color) 50%,
        transparent 51%,
        transparent 100%
      );
    }
    &:nth-child(5)::before {
      background: linear-gradient(
        90deg,
        var(--five-color) 50%,
        transparent 51%,
        transparent 100%
      );
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      width: 24px;
      height: 24px;
      top: 0;
      left: 60px;
      //   border-radius: 50%;
    }
  }
}
</style>
